<template>
    <div class="app-container">
        <el-form :model="queryParams" :inline="true">
            <el-form-item label="考勤日期">
                <el-date-picker type="daterange" placeholder="请选择考勤日期" 
                    clearable
                    size="small"
                    v-model="queryParams.workDay"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="上班签到时间">
                <el-time-picker type="date" placeholder="请选择上班签到时间" 
                    clearable
                    v-model="queryParams.upTime"
                    format="HH:mm"
                    value-format="HH:mm">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="下班签退时间">
                <el-time-picker type="date" placeholder="请选择下班签退时间" 
                    clearable
                    v-model="queryParams.downTime"
                    format="HH:mm"
                    value-format="HH:mm">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="误差范围">
                <el-input-number style="width: 240px" v-model="queryParams.interval" :min="1"></el-input-number>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">生成</el-button>
            </el-col>
        </el-row>

        <el-table 
            :data="tableData"
            :stripe="true"
            v-loading="loading"
            row-key="workDay"
            @selection-change="handleSelectionChange"
        >
            <el-table-column prop="expenseTime" type="index" label="序号"></el-table-column>
            <el-table-column prop="workDay" label="日期"></el-table-column>
            <el-table-column prop="workName" label="姓名"></el-table-column>
            <el-table-column prop="" label="部门">数字城市事业本部</el-table-column>
            <el-table-column prop="upTime" label="上班签到"></el-table-column>
            <el-table-column prop="downTime" label="下班签退"></el-table-column>
            <el-table-column prop="" label="备注">石家庄</el-table-column>
        </el-table>
    </div>
</template>

<script>
import { listWork } from "@/api/css/work";
export default {
    name:"workDay",
    data() {
        return {
            queryParams:{
                workDay:[],
                upTime:"08:55",
                downTime:"18:05",
                interval:10,
            },
            tableData:[]
        }
    },
    created() {

    },
     methods: {
        handleAdd() {
            this.loading = true;
            this.queryParams.startDate = this.queryParams.workDay[0];
            this.queryParams.endDate = this.queryParams.workDay[1];
            let query = JSON.parse(JSON.stringify(this.queryParams));
            delete query.workDay;

            listWork(query).then(
                response => {
                    console.log('response',response);
                    this.tableData = response.data;
                    this.loading = false;
                }
            );
        }
     }
}
</script>